<template>
  <div>
    <h2>{{$route.meta.title}}:</h2>
    <div>
      <el-input v-model.trim="merchantName" placeholder="请输入商家编号" size="mini" class="input"></el-input>
      <span class="span-title">根据代理商选择商家:</span>
      <el-select v-model="agentData" placeholder="请选择" size="mini">
        <el-option
          v-for="(val) in allAgentData"
          :key="val.agentId"
          :label="val.epName"
          :value="val.agentId"
          class="input"
        ></el-option>
      </el-select>
      <el-button type="primary" size="mini" style="margin: 0 0 0 20px" @click="search">搜索商家</el-button>
      <el-button type="primary" size="mini" style="margin: 0 0 0 50px" @click="add">开户</el-button>
      <el-button
        type="primary"
        size="mini"
        style="margin: 0 50px 0 0;float:right"
        @click="showAll"
      >所有商户</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column prop="merChantId" label="商户ID"></el-table-column>
      <el-table-column prop="merChantNo" label="商户编号" width="180"></el-table-column>
      <el-table-column label="商户状态">
        <template v-slot="{ row }">
          <span>{{merchantStatus[row.status]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="商户邮箱"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="cardNo" label="身份证号码"></el-table-column>
      <el-table-column prop="rate" label="费率"></el-table-column>
      <el-table-column prop="serviceCharge" label="提现手续费"></el-table-column>
      <el-table-column prop="asynnoticeAdd" label="异步通知地址"></el-table-column>
      <el-table-column prop="agent" label="商户的代理商信息">
        <template v-slot="{row}">
          <span>{{row.agent.epName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="update(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="dis-center">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageInfo.page"
        :page-size.sync="pageInfo.size"
        layout="prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog :title="type === 1? '新增商户' : '修改商户信息'" :visible.sync="dialogFormVisible" width="60%">
      <el-form :model="merchantInfo" :inline="true" ref="merchantForm" :rules="merchantRules">
        <el-form-item
          label="商户名称缩写"
          :label-width="formLabelWidth"
          prop="merChantNo"
          v-if="type === 1"
        >
          <el-input v-model="merchantInfo.merChantNo" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="商户邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="merchantInfo.email" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input
            v-model="merchantInfo.phone"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="cardNo">
          <el-input
            v-model="merchantInfo.cardNo"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="费率" :label-width="formLabelWidth" prop="rate">
          <el-input
            v-model="merchantInfo.rate"
            autocomplete="off"
            type="number"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="提现手续费" :label-width="formLabelWidth" prop="serviceCharge">
          <el-input
            v-model="merchantInfo.serviceCharge"
            autocomplete="off"
            size="mini"
            type="number"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth" prop="pwd" v-if="type === 1">
          <el-input v-model="merchantInfo.pwd" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="付款密码" :label-width="formLabelWidth" prop="payPwd" v-if="type === 1">
          <el-input v-model="merchantInfo.payPwd" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="异步通知地址" :label-width="formLabelWidth" prop="asynnoticeAdd">
          <el-input
            v-model="merchantInfo.asynnoticeAdd"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="代理商id" :label-width="formLabelWidth" prop="agentId">
          <el-select v-model="merchantInfo.agentId" placeholder="请选择" size="mini">
            <el-option
              v-for="(val) in allAgentData"
              :key="val.agentId"
              :label="val.epName"
              :value="val.agentId"
              class="input"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMerChant,
  addMerChant,
  updMerChant,
  getMerChantById
} from "@/api/MerchantManage";

import { allAgent } from "@/api/agentManage";
const merchantStatus = {
  1: "正常",
  2: "已禁用",
  3: "已删除"
};
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      type: 1,
      merchantStatus,
      allAgentData: [],
      merchantName: "",
      agentData: "全部",
      pageInfo: {
        page: 1,
        size: 10
      },
      merchantInfo: {},
      merchantRules: {
        merChantNo: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        email: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        cardNo: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        rate: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        serviceCharge: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        asynnoticeAdd: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        pwd: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        payPwd: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        agentId: [{ required: true, message: "内容不能为空", trigger: "blur" }]
      },
      tableData: []
    };
  },
  methods: {
    agentChange(val) {
      listMerChant({
        agentId: val
      }).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.allAgentData = res.data.data;
        } else {
          return this.$message.warning(res.data.message);
        }
      });
    },
    fetchList() {
      listMerChant().then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    handleCurrentChange(val) {
      listMerChant({
        page: val
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    add() {
      this.merchantInfo = {
        merChantNo: "",
        email: "",
        phone: "",
        cardNo: "",
        rate: "",
        serviceCharge: "",
        asynnoticeAdd: "",
        pwd: "",
        payPwd: "",
        agentId: ""
      };
      this.dialogFormVisible = true;
      this.type = 1;
    },
    showAll() {
      this.merchantName = "";
      this.fetchList();
    },
    addMerchant() {
      this.$refs["merchantForm"].validate(valid => {
        if (valid) {
          this.merchantInfo.rate = parseFloat(this.merchantInfo.rate).toFixed(
            2
          );
          this.merchantInfo.serviceCharge = parseFloat(
            this.merchantInfo.serviceCharge
          ).toFixed(2);
          let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            reg2 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
          if (!reg.test(this.merchantInfo.email)) {
            return this.$message.warning("邮箱格式不正确");
          }
          if (!reg2.test(this.merchantInfo.cardNo)) {
            return this.$message.warning("身份证格式不正确");
          }
          addMerChant(this.merchantInfo).then(res => {
            if (res.data.code === 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.$router.go(0);
            } else {
              this.$message.warning(res.data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateMerchant() {
      this.$refs["merchantForm"].validate(valid => {
        if (valid) {
          this.merchantInfo.rate = parseFloat(this.merchantInfo.rate).toFixed(
            2
          );
          this.merchantInfo.serviceCharge = parseFloat(
            this.merchantInfo.serviceCharge
          ).toFixed(2);
          let {
            merChantId,
            email,
            phone,
            cardNo,
            rate,
            serviceCharge,
            agentId
          } = this.merchantInfo;
          updMerChant({
            merChantId,
            email,
            phone,
            cardNo,
            rate,
            serviceCharge,
            agentId
          }).then(res => {
            if (res.data.code === 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.$router.go(0);
            } else {
              this.$message.warning(res.data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    search() {
      if (this.merchantName === "") {
        return this.$message.warning("请输入商家编号");
      }
      listMerChant({
        agentId: this.agentData !== "全部" ? this.agentData : "",
        merChantNo: this.merchantName
      }).then(res => {
        if (res.data.code === 200) {
          if (Object.keys(res.data.data).length > 0) {
            this.tableData = [res.data.data];
            this.agentData = res.data.data.agent.epName;
          } else {
            this.tableData = [];
          }
        } else {
          this.$message.warning(res.data.message);
        }
      });
    },
    addConfirm() {
      if (this.type === 1) {
        this.addMerchant();
      } else {
        this.updateMerchant();
      }
    },
    update(row) {
      this.type = 2;
      this.dialogFormVisible = true;
      this.merchantInfo = row;
    },
    getAllAgent(params) {
      return params ? allAgent(params) : allAgent();
    }
  },
  created() {
    this.fetchList();
    this.getAllAgent().then(res => {
      if (res.data.code === 200) {
        this.allAgentData = res.data.data;
      }
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/norlize.scss";
</style>